import React, { Component } from 'react'
import Detail from './Detail'
import { Route, Link } from 'react-router-dom'
import { Button } from 'antd'



export default class Message extends Component {
    state = {
        messageArr: [{
            id: 1,
            title: "消息1"
        }, {
            id: 2,
            title: "消息2"
        }, {
            id: 3,
            title: "消息3"
        }]
    }

    pushTO(res) {
        this.props.history.push({
            pathname: '/home/message/detail',
            state: res
        })
    }

    replaceTO(res) {
        this.props.history.replace({
            pathname: '/home/message/detail',
            state: res
        })
    }
    render() {
        const { messageArr } = this.state
        return (
            <div>
                {
                    messageArr.map((msgOBj) => (
                        <div key={msgOBj.id} >
                            {/* 向路由组件传递params参数 */}
                            {/* <Link to={`/home/message/detail/${msgOBj.id}/${msgOBj.title}`}>{msgOBj.title}</Link> */}

                            {/* 向路由组件传递search参数 */}
                            {/* <Link to={`/home/message/detail/?id=${msgOBj.id}&title=${msgOBj.title}`}>{msgOBj.title}</Link> */}

                            {/* 向路由组件传递state参数 */}
                            <Link to={{ pathname: '/home/message/detail', state: msgOBj }}>{msgOBj.title}</Link>
                            &nbsp;<Button type='primary' onClick={() => { this.pushTO(msgOBj) }}>push跳转</Button>
                            &nbsp;<Button onClick={() => { this.replaceTO(msgOBj) }}>replace跳转</Button>
                        </div>
                    ))
                }
                <hr />
                {/* {声明接受params参数} */}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}

                {/* {search参数无需声明接受} ,正常注册路由即可 */}
                {/* <Route path="/home/message/detail/" component={Detail} /> */}

                {/* {state参数无需声明接受} ,正常注册路由即可 */}
                <Route path="/home/message/detail/" component={Detail} />
            </div >
        )
    }
}
